<template name="webdavFilePicker">
	<div class="webdav">
		<div class="webdav-table-header">
			<div class="webdav-path-breadcrumb">
				<div class="webdav-breadcrumb-item">
					<button class="webdav-breadcrumb-folder js-webdav-breadcrumb-folder" aria-label="Home" data-index="-1">
						<i class="icon-home"></i>
					</button>
				</div>
				{{#each parentFolder in parentFolders}}
					<div class="webdav-breadcrumb-item">
						<i class="icon-angle-right"></i>
						<button class="webdav-breadcrumb-folder js-webdav-breadcrumb-folder" aria-label="{{ parentFolder }}" data-index="{{@index}}">
							{{ parentFolder }}
						</button>
					</div>
				{{/each}}
			</div>
			<div class="webdav-header-spacer"></div>
			<div class="webdav-search">
				<form class="webdav__search-form js-search-form" role="form">
					<span class="webdav-search-icon js-webdav-search-icon" title="Search">
						<i class="icon-search"></i>
					</span>
					<input
						type="text"
						class="webdav-search-input js-webdav-search-input"
						name="webdav-search-input"
						placeholder="Search..."
						autocomplete="off">
				</form>
			</div>
			<div class="list-grid-mode js-list-grid-mode" title="{{#if listMode}}Grid{{else}}List{{/if}} View">
				<i class="icon-{{#if listMode}}th{{else}}list{{/if}}"></i>
			</div>
		</div>
		<div class="rc-table-content">
			{{#if isLoading}}
				<div class="file-picker-loading">
					{{> loading}}
				</div>
			{{else}}
				{{#if listMode}}
					{{#table onSort=onTableSort}}
						<thead>
							<tr>
								<th class="webdav__file-icon">
									<div class="table-fake-th">
										<span class="webdav-grid-back-icon js-webdav-grid-back-icon">
											{{#if $neq webdavCurrentFolder '/'}}
												{{>icon icon='back'}}
											{{/if}}
										</span>
									</div>
								</th>
								<th class="webdav__file-name js-sort {{#if sortBy 'name'}}is-sorting{{/if}}" data-sort="name">
									<div class="table-fake-th"><span>Name</span>{{> icon icon=(sortIcon 'name')}}</div>
								</th>
								<th class="webdav__file-size js-sort {{#if sortBy 'size'}}is-sorting{{/if}}" data-sort="size">
									<div class="table-fake-th"><span>Size</span>{{> icon icon=(sortIcon 'size')}}</div>
								</th>
								<th class="webdav__file-date js-sort {{#if sortBy 'date'}}is-sorting{{/if}}" data-sort="date">
									<div class="table-fake-th"><span>Date Modified</span>{{> icon icon=(sortIcon 'date')}}</div>
								</th>
							</tr>
						</thead>
						<tbody>
							{{#each webdavNodes}}
								<tr class="webdav_{{this.type}} js-webdav_{{this.type}}" data-name="{{this.basename}}">
									<td>
										<div class="table-file-avatar-wrapper">
											{{#if filePreview}}
												<div class="table-file-avatar">
													<img src="{{filePreview}}" class="file-preview"/>
												</div>
											{{else}}
												{{#with iconType}}
													<div class="table-file-avatar">
														{{>icon icon=icon}}
													</div>
												{{/with}}
											{{/if}}
										</div>
									</td>
									<td>{{getName this.basename}}</td>
									<td>{{getSize}}</td>
									<td class="table-column-date">{{getDate}}</td>
								</tr>
							{{else}}
								<tr class="table-no-click">
									<td colspan="4" class="center-cell">{{_ "Nothing_found"}}</td>
								</tr>
							{{/each}}
						</tbody>
					{{/table}}
				{{else}}
					<div class="webdav-grid-header">
						<div class="webdav-grid-back-icon js-webdav-grid-back-icon">
							{{#if $neq webdavCurrentFolder '/'}}
								{{>icon icon='back'}}
							{{/if}}
						</div>
						<div class="rc-select webdav-sort">
							<span class="webdav-sort-direction js-webdav-sort-direction">
								{{> icon icon=(sortIcon getSortBy)}}
							</span>
							<select class="js-webdav-select-sort required rc-select__element">
								<option value="name" selected="{{sortBy 'name'}}" dir="auto">Name</option>
								<option value="size" selected="{{sortBy 'size'}}" dir="auto">Size</option>
								<option value="date" selected="{{sortBy 'date'}}" dir="auto">Date Modified</option>
							</select>
							{{> icon block="rc-select__arrow" icon="arrow-down"}}
						</div>
					</div>
					<div class="webdav-grid">
						{{#each webdavNodes}}
							<div class="webdav_{{this.type}} js-webdav_{{this.type}} grid-item" data-name="{{this.basename}}">
								<div>
									<div class="grid-file-avatar-wrapper">
										{{#if filePreview}}
											<div class="grid-file-avatar">
												<img src="{{filePreview}}" class="file-preview"/>
											</div>
										{{else}}
											{{#with iconType}}
												<div class="grid-file-avatar">
													{{>icon icon=icon}}
												</div>
											{{/with}}
										{{/if}}
									</div>
								</div>
								<div>{{getName this.basename}}</div>
							</div>
						{{else}}
							<div class="grid-empty">{{_ "Nothing_found"}}</div>
						{{/each}}
					</div>
				{{/if}}
			{{/if}}
		</div>
	</div>
</template>
